<template>
  <div v-if="dialogVisible" class="plan-manage-dialog">
    <div class="el-dialog">
      <div class="el-dialog__header">
        <span class="el-dialog__title">预案管理</span>
        <button class="el-dialog__headerbtn" @click="handleClose">
          <i class="el-icon-close"></i>
        </button>
      </div>
      <div class="el-dialog__body">
        <div class="dialog-content">
          <div class="table-operations">
            <button class="el-button el-button--primary" @click="handleAdd">
              <i class="el-icon-plus"></i> 新增预案
            </button>
          </div>
          
          <table class="el-table">
            <thead>
              <tr>
                <th>时间</th>
                <th>地点</th>
                <th>方案名称</th>
                <th>方案信息</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(plan, index) in plans" :key="index">
                <td>{{ plan.time }}</td>
                <td>{{ plan.location }}</td>
                <td>{{ plan.name }}</td>
                <td>{{ plan.info }}</td>
                <td>
                  <button class="el-button el-button--primary el-button--small" @click="handleEdit(plan)">
                    编辑
                  </button>
                  <button class="el-button el-button--danger el-button--small" @click="handleDelete(plan)">
                    删除
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 编辑/新增预案对话框 -->
    <div v-if="editDialogVisible" class="el-dialog edit-dialog">
      <div class="el-dialog__header">
        <span class="el-dialog__title">{{ isEdit ? '编辑预案' : '新增预案' }}</span>
        <button class="el-dialog__headerbtn" @click="editDialogVisible = false">
          <i class="el-icon-close"></i>
        </button>
      </div>
      <div class="el-dialog__body">
        <form class="el-form">
          <div class="el-form-item">
            <label class="el-form-item__label">时间</label>
            <div class="el-form-item__content">
              <input
                type="datetime-local"
                v-model="currentPlan.time"
                class="el-input__inner"
              />
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">地点</label>
            <div class="el-form-item__content">
              <input
                type="text"
                v-model="currentPlan.location"
                class="el-input__inner"
              />
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">方案名称</label>
            <div class="el-form-item__content">
              <input
                type="text"
                v-model="currentPlan.name"
                class="el-input__inner"
              />
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">方案信息</label>
            <div class="el-form-item__content">
              <textarea
                v-model="currentPlan.info"
                class="el-textarea__inner"
                rows="3"
              ></textarea>
            </div>
          </div>
        </form>
      </div>
      <div class="el-dialog__footer">
        <button class="el-button" @click="editDialogVisible = false">取消</button>
        <button class="el-button el-button--primary" @click="handleSave">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  plans: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'update:plans'])

const dialogVisible = ref(props.modelValue)
const editDialogVisible = ref(false)
const isEdit = ref(false)
const currentPlan = ref({
  time: '',
  location: '',
  name: '',
  info: ''
})

// 监听对话框显示状态
watch(() => props.modelValue, (val) => {
  dialogVisible.value = val
})

watch(() => dialogVisible.value, (val) => {
  emit('update:modelValue', val)
})

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
}

// 新增预案
const handleAdd = () => {
  isEdit.value = false
  currentPlan.value = {
    time: '',
    location: '',
    name: '',
    info: ''
  }
  editDialogVisible.value = true
}

// 编辑预案
const handleEdit = (row) => {
  isEdit.value = true
  currentPlan.value = { ...row }
  editDialogVisible.value = true
}

// 删除预案
const handleDelete = (row) => {
  if (confirm('确定要删除该预案吗？')) {
    const newPlans = props.plans.filter(plan => plan !== row)
    emit('update:plans', newPlans)
    alert('删除成功')
  }
}

// 保存预案
const handleSave = () => {
  if (!currentPlan.value.time || !currentPlan.value.location || 
      !currentPlan.value.name || !currentPlan.value.info) {
    alert('请填写完整信息')
    return
  }

  const newPlans = [...props.plans]
  if (isEdit.value) {
    const index = newPlans.findIndex(plan => plan === currentPlan.value)
    if (index !== -1) {
      newPlans[index] = { ...currentPlan.value }
    }
  } else {
    newPlans.push({ ...currentPlan.value })
  }
  
  emit('update:plans', newPlans)
  editDialogVisible.value = false
  alert(isEdit.value ? '编辑成功' : '新增成功')
}
</script>

<style lang="scss" scoped>
.plan-manage-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;

  .el-dialog {
    background: rgba(0, 24, 48, 0.95);
    border: 1px solid rgba(0, 194, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 194, 255, 0.2);
    border-radius: 4px;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    max-height: 80vh;
    display: flex;
    flex-direction: column;

    .el-dialog__header {
      padding: 20px;
      border-bottom: 1px solid rgba(0, 194, 255, 0.3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;

      .el-dialog__title {
        color: #00c2ff;
        font-size: 18px;
        font-weight: bold;
      }

      .el-dialog__headerbtn {
        background: none;
        border: none;
        color: #00c2ff;
        cursor: pointer;
        font-size: 20px;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(0, 194, 255, 0.1);
          transform: rotate(90deg);
        }
      }
    }

    .el-dialog__body {
      padding: 20px;
      overflow-y: auto;
      flex: 1;

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: rgba(0, 194, 255, 0.3);
        border-radius: 3px;
      }

      &::-webkit-scrollbar-track {
        background: rgba(0, 24, 48, 0.3);
        border-radius: 3px;
      }
    }

    .el-dialog__footer {
      padding: 20px;
      border-top: 1px solid rgba(0, 194, 255, 0.3);
      text-align: right;
      flex-shrink: 0;
    }
  }

  .edit-dialog {
    width: 50%;
    max-width: 600px;
  }

  .dialog-content {
    .table-operations {
      margin-bottom: 20px;
    }

    .el-table {
      width: 100%;
      border-collapse: collapse;
      background: transparent;

      th, td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid rgba(0, 194, 255, 0.2);
      }

      th {
        background: #00BAFF;
        color: #fff;
        font-weight: bold;
        font-size: 14px;
      }

      td {
        color: #fff;
        font-size: 14px;
      }

      tr {
        &:nth-child(odd) {
          background: #003B51;
        }
        &:nth-child(even) {
          background: #0A2732;
        }
        &:hover td {
          background: rgba(0, 194, 255, 0.1);
        }
      }
    }
  }

  .el-form {
    .el-form-item {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;

      .el-form-item__label {
        width: 100px;
        color: #00c2ff;
        text-align: right;
        padding-right: 12px;
      }

      .el-form-item__content {
        flex: 1;

        .el-input__inner,
        .el-textarea__inner {
          width: 100%;
          padding: 8px 12px;
          background: rgba(0, 24, 48, 0.7);
          border: 1px solid rgba(0, 194, 255, 0.3);
          color: #fff;
          border-radius: 4px;

          &:focus {
            border-color: #00c2ff;
            outline: none;
          }
        }
      }
    }
  }

  .el-button {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    margin-left: 8px;
    background: rgba(0, 24, 48, 0.7);
    color: #fff;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(0, 194, 255, 0.2);
      transform: translateY(-2px);
    }

    &--primary {
      background: #00c2ff;
      color: #fff;

      &:hover {
        background: #00a8e0;
      }
    }

    &--danger {
      background: #f56c6c;
      color: #fff;

      &:hover {
        background: #e64242;
      }
    }

    &--small {
      padding: 6px 12px;
      font-size: 12px;
    }
  }
}
</style> 